import React, { useRef,useState ,FC, useEffect } from 'react'
import MyTitle from '../../components/Title'
import {Form,Input,Row,Col,Select, Button , Image, message } from 'antd'
import { annoTypeList } from '../../utils';
import { UserOutlined, LockOutlined ,MobileOutlined,UploadOutlined} from '@ant-design/icons';
import { ajax } from './../../api/index';
import { baseURL } from '../../api/request';
import { inject, observer } from 'mobx-react';
import { useNavigate, useParams } from 'react-router-dom';

const { TextArea } = Input;
const {Option} = Select 
const  Annoset:FC<any> = ({
  uinfo
})=> {
 
  const params = useParams()
  const [form] = Form.useForm()
  const file:any = useRef()
  const [path,setPath] = useState<any>('')
  const navigate = useNavigate()

  
  useEffect(()=>{
    ajax.getannoone({
        _id:params.aid  
    })
    .then(res=>{
        if(res.code==200){
            setPath(res.result.desc)
            form.setFieldsValue(res.result)
        }
    })
  },[])
  const onFinish = async (value:any)=>{
    console.log(value)
    // 修改公告 
    value._id = params.aid;
    let {code,result} = await ajax.updateanno(value)
    if(code==200){
        navigate(-1)
    }
  }
  const onFinishFailed = ()=>{
     message.error("请输入公告信息")
  }
  const todoUpload = ()=>{
     file.current.click()
  }

  const uploadFile = async ()=>{
    const filedata = file.current.files[0]
    const data = new FormData()
    data.append("file",filedata)

    let res = await ajax.uploadfile(data)
    if(res.code==200){
       setPath(res.path)
       form.setFieldsValue({'desc':res.path})
    }
  }

  const resetFields = ()=>{
    form.resetFields()
    setPath(null)
  }
  return (
    <Row>
       <Col span={8}>
        <MyTitle text="公告修改"/>
          <Form
              name="normal_login"
              className="myform"

              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              form={form}
              layout={"vertical"}
          >
            <Form.Item
                name="title"
                label="公告标题"
                rules={[{ required: true, message: '请输入公告标题' }]}
            >
                <Input  placeholder="公告标题" />
            </Form.Item>
            <Form.Item
                name="content"
                label="公告内容"
                rules={[{ required: true, message: '请输入公告内容' }]}
            >
                <TextArea  placeholder="公告内容" />
            </Form.Item>
            <Form.Item
                name="type"
                label="公告类型"
                rules={[{ required: true, message: '请选择' }]}
            >
                <Select  style={{ width: '100%' }} >
                  {
                    annoTypeList.map((l,i)=>(
                      <Option key={i} value={l.value}>{l.label} </Option>
                    ))
                  }
                </Select>
            </Form.Item>
            <Form.Item
                name="desc"
                label="公告描述"
                
            >
                {/* 上传图片 form.getFieldValue('desc')&& */  }
                {
                  path && <Image src={path.replace(/public/,baseURL)} style={{width:200,height:120,marginTop:20}} />
                }
                <input type="file"  ref={file} onChange={uploadFile}  style={{display:'none'}} />
                <Button style={{display:'block',marginTop:15}} onClick={todoUpload} icon={<UploadOutlined />}>上传公告图片描述</Button>
            </Form.Item>
            <Form.Item>
               <Row>
                 <Col span={11}>
                    <Button type="primary" style={{width:'100%'}}  htmlType="submit" >修改公告</Button>
                 </Col>
               </Row>
            </Form.Item>
          </Form>
       </Col>
    </Row>
  )
}

export default inject('uinfo')(observer(Annoset))